<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>图片上传主题</title>
<link rel="stylesheet" type="text/css" href="http://docs.kissyui.com/kissy-dpl/base/build/css/dpl-pkg.css"/>
<link rel="stylesheet" type="text/css" href="../../assets/demo.css"/>
<script src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy.js" charset="utf-8"></script>
</head>
<body>
<article id="doc">
    <h4>模板名：imageUploader</h4>
    <p>图片上传主题，带图片预览（不支持的浏览器使用服务器端返回的图片路径），支持拖拽上传</p>
    <p>作者：第一版由紫英同学完成，苏河同学做了大量优化，明河整理优化、加入飞绿同学的拖拽</p>
    <p>版本：V1.1</p>
    <div class="upload-area">
        <script type="text/uploader-restore" id="J_ImageUploaderRestore">
            [
                {"name":"icon_evil.gif",
                 "size":1446,
                 "type":"image/gif",
                 "result":{
                    "status":1,
                    "data":{
                        "name":"icon_evil.gif",
                        "url":"http://tp4.sinaimg.cn/1653905027/50/5601547226/1",
                        "item_id":"42458"
                    }
                 }
                }
            ]
        </script>
        <ul class="clearfix" id="J_UploaderQueue">
            <li>
                <div id="J_UploadBg" class="unupload-area">
                    <a class="unupload" id="J_UploaderBtn"
                       data-config='{
                             "theme" : "imageUploader",
                             "urlsInputName":"urlsInput",
                             "serverConfig":{"action":"./upload.php","data":{"iid":77010,"fieldId":132338},"dataType" : "json"},
                             "name":"Filedata",
                             "restoreHook":"#J_ImageUploaderRestore"
                       }'
                       data-auth='{
                             "require":[true,"必须至少上传一个文件！"],
                                        "maxSize":[500, "文件大小为{size}，文件太大！"],
                                        "allowExts":[
                                            {"desc":"JPG,JPEG,PNG,GIF,BMP", "ext":"*.jpg;*.jpeg;*.png;*.gif;*.bmp"},
                                            "文件格式错误！"],
                                        "max":[5,"最多允许上传五张图片！"]
                       }'>
                        <span class="count"> 还可以上传<em id="J_UploadCount">5</em>图片！ </span>
                        <s class="bg"></s>
                        <input type="hidden" value="" name="urlsInput">
                    </a>
                </div>
            </li>
        </ul>
    </div>
    <h5>如何展示编辑页面已经上传的图片？</h5>
    <p>在实际应用中通常会有个需求：用户已经上传了三张图片，然后保存，那么用户再进入这个页面时，应该如何展示三张图片呢？这里有个难点，我们需要把图片插入到组件的队列中，这样文件数的统计和、删除等行为才是一直的。</p>
    <p><b>在页面中输出图片数据，比如下面的代码</b></p>
    <pre class='brush: js;'>
        <script type="text/uploader-restore" id="J_ImageUploaderRestore">
            [
                {"name":"icon_evil.gif",
                "size":1446,
                "type":"image/gif",
                "result":{
                    "status":1,
                    "data":{
                        "name":"icon_evil.gif",
                        "url":"http://tp4.sinaimg.cn/1653905027/50/5601547226/1",
                        "item_id":"42458"
                    }
                }
                }
            ]
        </script>
    </pre>
    <p>这个文件数据结构，跟队列中的files属性是一致的，这样可以保证，删除、渲染图片取数据的行为是一致。</p>
    <p><b>加上对应的restoreHook参数</b></p>
    <pre class='brush: xml;'>
                       data-config='{
                             "restoreHook":"#J_ImageUploaderRestore"
                       }'
    </pre>
    <p>好了，组件会自动将数据插入到queue中，并渲染出图片。</p>
    <h5>如何取到服务器端返回的数据？</h5>
    <p>当文件上传动作完成后（不管是成功还是失败），组件都会将服务器端的数据插入到文件数据中，你可以通过file.result获取服务器端的数据。留意在上传之前并不存在。</p>
    <pre class='brush: js;'>
        _successHandler:function (ev) {
            var self = this,
                file = ev.file,
                //服务器端返回的数据
                result = file.result;
        }
    </pre>
    <h5>如何处理不支持图片预览的浏览器？</h5>
    <p>不支持图片预览的浏览器，我们可以使用服务器返回的图片路径，插入到图片的src方式。</p>
        <pre class='brush: js;'>
        /**
         * 将服务器返回的图片路径写到预览图片区域，部分浏览器不支持图片预览
         * @param {String} id  文件id
         * @param {Object} result  服务器端返回的结果集
          */
        _changeImageSrc:function(id,result){
            var data = result.data,url,
                $img = $('.J_Pic_' + id);
            if(!S.isObject(data)) return false;
            url = data.url;
            //不存在预览图片，IE8使用滤镜处理图片预览有问题
            if($img.attr('src') == EMPTY || S.UA.ie == 8){
                $img.attr('src',url);
            }
        }
    </pre>
    <h5>如何处理图片验证？</h5>
    <pre class='brush: js;'>
           data-auth='{
                 "require":[true,"必须至少上传一个文件！"],
                            "maxSize":[500, "文件大小为{size}，文件太大！"],
                            "allowExts":[
                                {"desc":"JPG,JPEG,PNG,GIF,BMP", "ext":"*.jpg;*.jpeg;*.png;*.gif;*.bmp"},
                                "文件格式错误！"],
                            "max":[5,"最多允许上传五张图片！"]
           }'
    </pre>
</article>
<script>
    var S = KISSY;
    S.config({
        packages:[
            {
                name:"gallery",
                path:"../../../../../../",
                //path:"http://a.tbcdn.cn/s/kissy/",
                charset:"utf-8"
            }
        ]
    });
    //加载上传组件入口文件
    KISSY.use('gallery/form/1.1/uploader/index', function (S, RenderUploader) {
        new RenderUploader('#J_UploaderBtn', '#J_UploaderQueue');
    })
</script>

<!-- 代码高亮 START  -->
<link href='../../assets/syntaxhighlighter_3.0.83/sh.css' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="../../assets/syntaxhighlighter_3.0.83/sh.js"></script>
<script type="text/javascript">SyntaxHighlighter.all();</script>
<!-- 代码高亮 END  -->
</body>
</html>
